<template>
  <div>
    <div>
      <el-button size="mini" @click="handleAdd()">新增</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="岗位名称" width="100" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.jobName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="岗位编码" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.jobCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="left">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="left">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- dialog 模态框 -->
    <el-dialog
      :title="dialogInfo.title"
      :visible.sync="dialogInfo.dialogVisible"
      :width="dialogInfo.width"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="岗位名称" prop="jobName">
          <el-input v-model="ruleForm.jobName"></el-input>
        </el-form-item>
        <el-form-item label="岗位编码" prop="jobCode">
          <el-input v-model="ruleForm.jobCode"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="type">
          <el-input-number
            size="medium"
            v-model="ruleForm.sort"
            :step-strictly="true"
            controls-position="right"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInfo.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getJobList,
  addJob,
  updateJob,
  deleteJob
} from "@/api/system/job";
export default {
  name: "job",
  data() {
    return {
      tableData: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10
      },
      dialogInfo: {
        dialogVisible: false,
        title: "",
        width: "30%"
      },
      ruleForm: {
        jobId: "",
        jobName: "",
        jobCode: "",
        sort: 0,
        remark: ""
      },
      rules: {
        jobName: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
        jobCode: [
          { required: true, message: "请输入岗位编码", trigger: "blur" }
        ],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getJobList(this.queryParams).then(resp => {
        if (resp.code == 0) {
          this.tableData = resp.data.item;
          this.total = resp.data.total;
        }
      });
    },
    // 每页条目数变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页数变化
    handleCurrentChange(val) {
      this.queryParams.pageIndex = val;
      this.getList();
    },
    // 打开dialog
    handleAdd() {
      this.dialogInfo.title = "新增";
      this.dialogInfo.dialogVisible = true;
      this.resetForm();
      this.clearValidate("ruleForm");
    },
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // 判断是增加还是修改
          if (this.dialogInfo.title == "新增") {
            let obj = {
              jobName: this.ruleForm.jobName,
              jobCode: this.ruleForm.jobCode,
              sort: this.ruleForm.sort,
              remark: this.ruleForm.remark
            };
            addJob(obj).then(resp => {
              if (resp.code == 0) {
                this.notifySuccess(resp.message);
                this.closeDialog();
                this.getList();
              } else {
                this.notifyErr(resp.message);
              }
            });
          } else {
            let obj = {
              jobId: this.ruleForm.jobId,
              jobName: this.ruleForm.jobName,
              jobCode: this.ruleForm.jobCode,
              sort: this.ruleForm.sort,
              remark: this.ruleForm.remark
            };
            updateJob(obj).then(resp => {
              if (resp.code == 0) {
                this.notifySuccess(resp.message);
                this.closeDialog();
                this.getList();
              } else {
                this.notifyErr(resp.message);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭dialog
    closeDialog() {
      this.dialogInfo.dialogVisible = false;
    },
    resetForm() {
      this.ruleForm = {
        jobId: "",
        jobName: "",
        jobCode: "",
        sort: 0,
        remark: ""
      }
    },
    // 移除表单项的校验结果
    clearValidate(formName) {
      this.$nextTick(function() {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.$refs[formName].clearValidate();
      });
    },
    handleEdit(index, row) {
      // 打开dialog
      this.dialogInfo.title = "编辑";
      this.dialogInfo.dialogVisible = true;
      this.clearValidate("ruleForm");
      this.ruleForm.jobId = row.jobId;
      this.ruleForm.sort = row.sort;
      this.ruleForm.remark = row.remark;
      this.ruleForm.jobName = row.jobName;
      this.ruleForm.jobCode = row.jobCode;
    },
    // 删除岗位
    handleDelete(index, row) {
      deleteJob(row.jobId).then(resp => {
        if (resp.code == 0) {
          
          this.notifySuccess(resp.message);
          this.getList();
        }
      });
    },
  }
}
</script>